<template>
  <h2>响应式数据</h2>
  <p>name: {{ state.name }}</p>
  <p>count: {{ state.count }}</p>

  <button @click="change">btn</button>

  <hr />

  <p>num: {{ num }}</p>
  <button @click="change2">btn2</button>
</template>

<script setup>
import { reactive, ref } from "vue";

const state = reactive({
  name: "zhangsan",
  count: 5,
});
const change = () => {
  // console.log(state);
  state.count++;
};

// ref只能定义一个变量
const num = ref(10);
const change2 = () => {
  num.value++;
};
</script>

<!-- <script>
import { reactive, ref } from "vue";
export default {
  setup() {
    // 一般情况下，推荐使用ref，在form表单里面推荐使用reactive

    // reactive也可以创建响应式变量
    // reactive可以一次性定义很多个变量
    const state = reactive({
      name: "zhangsan",
      count: 5,
    });
    const change = () => {
      // console.log(state);
      state.count++;
    };

    // ref只能定义一个变量
    const num = ref(10);
    const change2 = () => {
      num.value++;
    };

    return { state, change, num, change2 };
  },
};
</script> -->
